<template>
    <view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3" @click="showP=true">
			
			<view class="flex between h40 lh40 pr10 tr flex1">
			<text>{{$t('bico.W233')}}</text>
			<text>{{type.name}}</text></view>
		
			<u-picker mode="selector" v-model="showP"  :default-selector="[0]"
			:confirm-text="confirmText" :cancel-text="cancelText"
			  @confirm="getType" :range="typeArr" range-key="name">
			</u-picker>
		</view>
		<view class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
			<text>{{$t('bico.W235')}}：</text>
			<input type="text"  v-model="name" class="h40 lh40 pr10 tr flex1 input-uni" :placeholder="$t('collect.p_name')">
		</view>
		<!-- <view class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
			<text>{{$t('bico.W235')}}：</text>
			<input type="text"  v-model="lastName" class="h40 lh40 pr10 tr flex1 input-uni" :placeholder="$t('bico.W236')">
		</view>
		<view class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
			<text>{{$t('bico.W237')}}：</text>
			<input type="text"  v-model="fristName" class="h40 lh40 pr10 tr flex1 input-uni" :placeholder="$t('bico.W238')">
		</view> -->
		<view class="flex bgwhite alcenter radius4 pl10 mt10 bdb_blue3">
			<text>{{$t('bico.W239')}}：</text>
			<input type="text"  v-model="card_id" class="h40 lh40 pr10 tr flex1 input-uni" :placeholder="$t('bico.W240')">
		</view>
		
		<view class="flex alcenter mt10">
			<image src="../../static/image/tssp.png" class="wt15 h15"></image>
			<view class="chengse ft14"> 丨{{$t('bico.W241')}}</view>
		</view>
		
		<u-gap height="100" bg-color=""></u-gap>
		<view class="flex mt10 mywrap between">
			
			<view class="w48 ptb5 plr5 bd_dashed radius4 tc mb10" @tap="uploadImg(1)">
				<view class="" v-if="!hasUp1">
					
					<image class="sfzrz" src="/static/image/zmrz.png"></image>
					<view class="mt10 tc">{{$t('collect.up_cardz')}}</view>
				</view>
				<image :src="img1" class="w95" mode="widthFix" v-else style="max-height: 100px;"></image>
			</view>
			
			<view class="w48 ptb5 plr5 bd_dashed radius4 tc mb10" @tap="uploadImg(2)">
				<view class="" v-if="!hasUp2">
					
					<image class="sfzrz" src="/static/image/fmrz.png"></image>
					<view class="mt10 tc">{{$t('collect.up_cardf')}}</view>
				</view>
				<image :src="img2" class="w95 " mode="widthFix" v-else style="max-height: 100px;"></image>
			</view>
			
		</view>
		<view class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto" @tap="confirm">{{$t('login.e_confrim')}}</view>
    
	
	
		<view class="flex alcenter mt10">
			
			<view class="bottom">
				<ul>
					<li >{{$t('bico.W805')}}</li>
					<li>{{$t('bico.W806')}}</li>
					<li>{{$t('bico.W807')}}</li>
					<li >{{$t('bico.W808')}}</li>
					<li >{{$t('bico.W809')}}</li>
					<li>{{$t('bico.W810')}}</li>
				</ul>
			</view>
			
		</view>
	
	
	
	
	
	
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import {domain} from '@/common/domain.js'
	import {uploadImg,verify} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return{
				confirmText:this.$t('login').c1,
				cancelText:this.$t('login').c2,
				showP:false,
				name:'',
				lastName:'',
				fristName:'',
				card_id:'',
				typeArr:[
					{name:this.$t('assets.idCard'),value:1},
					{name:this.$t('assets.passport'),value:2}
				],
				index:0,
				sign:1,
				type:{name:this.$t('assets.p_select_type'),value:0},
				img:'/static/image/addImg.png',
				hasUp1:false,
				hasUp2:false,
				hasUp3:false,
				img1:'',
				img2:'',
				img3:'',
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad() {
			this.$utils.setTheme(this.theme);
	        uni.setNavigationBarTitle({
				title:this.$t('bico.W242'),
			})
			this.type=this.typeArr[0]
		},
		methods:{
			getType(e){
				var index= e[0];
				this.type=this.typeArr[index]
			},
			uploadImg(i){
				console.log(domain);
				var that=this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: domain+uploadImg, //仅为示例，非真实的接口地址
							// #ifdef APP-PLUS
							url:domain+uploadImg,
							// #endif
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(typeof uploadFileRes.data);
								var data=JSON.parse(uploadFileRes.data);
								console.log(data)
								if(data.code==200){
									var img='img'+i;
									var hsup='hasUp'+i;
									console.log(i,img)
									that[img]=domain+data.data.src;
									that[hsup]=true;
								}
							}
						});
					}
				});
			},
			confirm(){
					
				if(this.sign == 2){
					return this.$utils.showLayer(this.$t('home.p_submit_twice'))
				}
				if(this.type.value == 0){
					return this.$utils.showLayer(this.$t('assets.p_select_type'))
				}
				if(!this.name){
					return this.$utils.showLayer(this.$t('collect.p_name'))
					
				}
				// if(!this.lastName){
				// 	return this.$utils.showLayer(this.$t('collect.p_last_name'))
				// }
				// if(!this.fristName){
				// 	return this.$utils.showLayer(this.$t('collect.p_frist_name'))
				// }
				if(!this.card_id){
					return this.$utils.showLayer(this.$t('collect.p_cardno'))
				}
				if(!this.img1){
					return this.$utils.showLayer(this.$t('collect.up_cardz'))
				}
				if(!this.img2){
					return this.$utils.showLayer(this.$t('collect.up_cardf'))
				}
				// if(!this.img3){
				// 	return this.$utils.showLayer(this.$t('collect.up_cardhand'))
				// }
				var dto = {
					type:this.type.name,
					name:this.name,
					// fistName:this.lastName,
					// lastName:this.fristName,
					idCard:this.card_id,
					frontImg:this.img1,
					backImg:this.img2
				}
				this.$utils.initDataToken({url:verify,type:'get',data:dto},(res,msg)=>{
					// this.$utils.showLayer(msg);
					this.sign=this.sign+1
					setTimeout(()=>{
						this.$utils.showLayer(msg);
					},100)
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">

	.vh100 {
	    min-height: 100vh;
	    padding: 0vw 2vw 0;
	    position: relative;
	}
	.radius28 {
	    border-radius: 4px;
	}
	.bgBlue {
	        background: #2196F3;
	        background-image: -webkit-linear-gradient( 0deg, rgb(71,96,255) 0%, rgb(13,204,255) 100%);
	        box-shadow: 0 3px 6px 0 rgba(67,67,67,.14);
	}
	.sfzrz {
	        width: 160px;
	        height: 110px;
	}
	
	.bottom {
		width: 100%;
		height: 600upx;
		/* background: url(/static/img/banner.png) no-repeat;
		background-position:left bottom; */
		background-size: 100%;
		margin-top: 30px;
	}
	
	.bottom ul {
		padding-left: 22px;
		box-sizing: border-box;
	}
	
	.bottom ul li {
		width: 100%;

	}
	
</style>
